<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计划录入</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script src="/js/layer.js"></script>
<style>
    #readyDirll {
        height:100%;
    }
    .el-card {
        height:100%;
    }
    .el-card__body {
        height:100%;
    }
    .role {
        overflow: hidden;
    }
    .role li {
        float: left;
        margin-right:15px;
        margin-bottom: 15px;
    }
    .role li img {
        height:60px;
        width:60px;
    }
    /*遮罩层样式*/
    .Mask {
        width:60px;
        height:60px;
        background-color:#ccc;
        display: block;
        position: absolute;
        top:0;
        border-radius: 30px;
        opacity:0.8;
    }
    /*el-row样式*/
    .el-row {
        margin-top:10px;
    }
    #iframeModel {
        height:calc(100% - 366px);
    }
    #iframeModel iframe {
        height:100%!important;
    }
    .el-row .el-col {
        height:100%;
    }
    .el-row .el-col .grid-content{
        height:100%;
    }
</style>
<div id="readyDirll">
    <el-card v-if="flag">
        <h1 style="text-align: center;">{{dirllName}}</h1><span style="color:red;"></span>
        <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">
                <h3 style="vertical-align: middle;text-align: center;">演练状态:</h3>
            </div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">
                {{state}}
            </div></el-col>
        </el-row>
        <!--        参演角色-->
        <el-row style="max-height: 156px;overflow: auto;">
            <el-col :span="6"><div class="grid-content bg-purple">
                <h3 style="vertical-align: middle;text-align: center;">参演角色:</h3>
            </div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">
                <ul class="role">
                    <li v-for="(item,index) in users" :key="index" :title="item.state =='UNJOIN'?'离线':'在线'">
                        <img src="../avatar/1.jpg">
                        <span :class="{Mask:item.state == 'UNJOIN'?true:false}"></span>
                        <h5 style="text-align: center;margin-top:3px;">{{item.rolename}}</h5>
                    </li>
                </ul>
            </div></el-col>
        </el-row>
        <!--        演练方案-->
        <el-row id="iframeModel">
            <el-col :span="6"><div class="grid-content bg-purple">
                <h3 style="vertical-align: middle;text-align: center;">演练方案:</h3>
            </div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">
                <iframe v-if="url !== '/assumption/null'" id="inlineFrameExample"
                        title="Inline Frame Example"
                        width="92%"
                        :src="url">
                </iframe>
                <div v-else>暂未上传演练说明文件,如需预览演练方案，请先停止演练，在演练计划中上传<span style="color:red;">"说明文件"</span>后，再进入演练！</div>
            </div></el-col>
        </el-row>
        <!--        应答时间-->
        <el-row style="margin-top:20px;">
            <el-col :span="6"><div class="grid-content bg-purple">
                <h3 style="vertical-align: middle;text-align: center;">应答时间:</h3>
            </div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light" style="font-size:17px;">
                <el-input :disabled="true" style="width:100px;" v-model="answerTime" number></el-input>&nbsp;&nbsp;秒
            </div></el-col>
        </el-row>

        <el-row style="text-align: center;margin-top:20px;">
            <el-button type="primary" style="width:120px;" @click="joinDirll">加入演练</el-button>
        </el-row>
    </el-card>
    <el-card v-else>
        <img src="src/style/res/noDirll.png" style="position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);">
    </el-card>
</div>
<script>
    var readyDirll = new Vue({
        el: "#readyDirll",
        data() {
            return {
                //是否进入了演练
                flag:false,
                //演练状态
                state:"",
                //演练数据
                data:null,
                // 演练名称
                dirllName:"",
                //演练角色
                users:[],
                //演练方案链接
                url:"",
                //应答时间
                answerTime:"",
                //定时器
                check:null,
            }
        },
        mounted() {
            this.getDirllStatus();
            //定时查询演练状态 刷新数据
            this.check = setInterval(()=>{
                this.getDirllStatus();
            },5000)
        },
        methods: {
            //获取演练状态
            getDirllStatus(){
                axios.get('/exercise/isready').then(res=>{
                    if(res.data.success){
                        this.flag = res.data.ready;
                        if(this.flag){//进入了演练
                            if(res.data.state == "INIT"){
                                this.state = "演练初始化已完成";
                            }else if(res.data.state == "START"){
                                this.state = "演练已开始";
                                //清除 状态查询定时器
                                clearInterval(this.check);
                                //跳转至演练页面
                                window.location = '/#/dirll/implement';
                            }else if(res.data.state == "SUSPEND"){
                                this.state = "演练已暂停";
                            }else{
                                this.state = "演练已停止";
                                //清除 状态查询定时器
                                clearInterval(this.check);
                            }
                            //获取演练基本数据
                            this.getBaseData();
                        }
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //获取基本数据
            getBaseData(){
                axios.get('/exercise/get_info').then(res=>{
                    if(res.data.success){
                        this.data = res.data.data;
                        this.dirllName = res.data.data.name;
                        this.users = res.data.data.users;
                        this.url = res.data.data.content_url;
                        this.answerTime = res.data.data.sleepTime;
                        console.log(this.data);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //加入演练
            joinDirll(){
                axios.get('/exercise/join').then(res=>{
                    if(res.data.success){
                        this.$message.success("加入演练成功！");
                        //刷新状态
                        this.getDirllStatus();
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
        }
    })
</script>
</body>
</html>